<template>
  <div class="app-container">
    <div class="box_card top">
      <el-card>
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="标准规范层次" name="first">
              <el-col :span="18" class="card-box">
                <div class="">
                  <div class="custom-title">
                    标准规范入库情况
                  </div>
                  <StandardStorage id="standardStorageId" :dataSource="levelChartData" ref="standardLevelChart"></StandardStorage>
                </div>
              </el-col>
              <el-col :span="6" class="card-box">
                <div class="" style="padding-left:10%;">
                  <div class="custom-title">
                    系统调用信息排名
                  </div>
                  <Rank id="rankId"></Rank>
                </div>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="功能序列" name="second">
              <el-col :span="18" class="card-box">
                <div class="">
                  <div class="custom-title">
                    标准规范入库情况
                  </div>
                  <StandardFunction id="standardFunctionId" :dataSource="functionChartData" ref="standardFunctionChart"></StandardFunction>
                </div>
              </el-col>
              <el-col :span="6" class="card-box">
                <div class="" style="padding-left:10%;">
                  <div class="custom-title">
                    系统调用信息排名
                  </div>
                  <Rank id="rankId"></Rank>
                </div>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="专业门类" name="third">
              <el-col :span="18" class="card-box">
                <div class="">
                  <div class="custom-title">
                    标准规范入库情况
                  </div>
                  <StandardMajor id="standardMajorId" :dataSource="majorChartData" ref="standardMajorChart"></StandardMajor>
                </div>
              </el-col>
              <el-col :span="6" class="card-box">
                <div class="" style="padding-left:10%;">
                  <div class="custom-title">
                    系统调用信息排名
                  </div>
                  <Rank id="rankId" :dataSource="rankData"></Rank>
                </div>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-card>
    </div>
    <div class="box_card center">
      <el-card style="grid-area: a" :body-style="{ height:'calc(100% - 40px)'}">
        <div slot="header">
          <span>线上搜索统计</span>
        </div>
        <el-row>
          <el-col :span="12">
            <div>
              <div style="margin-bottom:10px">搜索用户数</div>
              <div style="font-size:24px;">{{searchUserCount}}</div>
              <SearchUserAll id="searchUserAllId" :dataSource="searchAllChartData" ref="searchAllChart"></SearchUserAll>
            </div>
          </el-col>
          <el-col :span="12">
            <div style="padding-left:10px;">
              <div style="margin-bottom:10px">人均搜索次数</div>
              <div style="font-size:24px;">{{avgSearchCount}}</div>
              <SearchUserAvg id="searchUserAvgId" :dataSource="searchAvgChartData" ref="searchAvgChart"></SearchUserAvg>
            </div>
          </el-col>
          <el-col :span="24" style="margin-top:20px">
            <el-table v-loading="loading" :data="searchList" style="margin-bottom:30px">
              <el-table-column label="排名" align="left" prop="rank" width="120" />
              <el-table-column label="搜索关键字" align="left" prop="search" :show-overflow-tooltip="true" />
              <el-table-column label="用户数" align="left" prop="num" :show-overflow-tooltip="true" />
            </el-table>
            <el-pagination style="text-align: right;" :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" @pagination="getList" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-size="5" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="grid-area: b" :body-style="{ height:'calc(100% - 40px)'}">
        <div slot="header"><span>本年度入库标准规范数量</span></div>
        <div class="card_height">
          <div class="card-num" style="margin-bottom: 0">
            {{yearSum}}
          </div>
          <template>
            <YearChart id="yearChartId" ref="yearChart" :dataSource="yearChartData"></YearChart>
          </template>
        </div>
      </el-card>
      <el-card style="grid-area: c" :body-style="{ height:'calc(100% - 40px)'}">
        <div slot="header"><span>本月入库标准规范数量</span></div>
        <div class="card_height">
          <div class="card-num">
            {{monthNewAdd}}
          </div>
          <div style="margin-top:auto;margin-bottom: 10px">
            <el-row type="flex">
              <el-col :span="24">
                <el-col :span="11" class="card-box" style="padding:0 1px 0 1px;">月同比</el-col>
                <el-col :span="1" class="card-box" style="padding-left:1px;">
                  <i v-if="compSameMon >= 0" class="el-icon-caret-top success"></i>
                  <i v-if="compSameMon < 0" class="el-icon-caret-bottom danger"></i>
                </el-col>
                <el-col :span="4" class="card-box">
                  {{Math.abs(compSameMon)}}%
                </el-col>
              </el-col>
              <el-col :span="24">
                <el-col :span="11" class="card-box" style="padding:0 1px 0 1px;">月环比</el-col>
                <el-col :span="1" class="card-box" style="padding-left:1px;">
                  <i v-if="compSameMon >= 0" class="el-icon-caret-top success"></i>
                  <i v-if="compSameMon < 0" class="el-icon-caret-bottom danger"></i>
                </el-col>
                <el-col :span="4" class="card-box">
                  {{Math.abs(monOnMon)}}%
                </el-col>
              </el-col>
            </el-row>
          </div>
          <div class="card-footer">
            月均入库数 {{monthAvgAdd}}
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  getChartYearData,
  getHistory,
  getCompareData,
  listTbHistory,
  getTotalProgress,
  getApprovalsNodes,
  getRelatedStandardByUserid,
  getSearchUserData,
  getStandardLevelData,
  getStandardFunctionData,
  getStandardMajorData,
  getSearchChartData,
  getRankData
} from "@/api/result/show"

import YearChart from "./charts/YearChart";
import SearchUserAll from "./charts/SearchUserAll";
import SearchUserAvg from "./charts/SearchUserAvg";
import HistoryNum from "./charts/HistoryNum";
import StandardStorage from "./charts/StandardStorage";
import StandardFunction from "./charts/StandardFunction";
import StandardMajor from "./charts/StandardMajor";
import TreeNode from "./charts/TreeNode";
import Rank from "./elements/Rank";

export default {
  name: "Server",
  components: {
    YearChart,
    SearchUserAll,
    SearchUserAvg,
    HistoryNum,
    StandardStorage,
    StandardFunction,
    StandardMajor,
    TreeNode,
    Rank
  },
  data() {
    return {
      nodeSelected: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        nid: null
      },
      total: 0,
      // 加载层信息
      loading: false,
      // 用户表格数据
      userList: [],

      //————————————————————本年度入库标准规范数量————————————————————
      yearChartData: {
        column: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        values: []
      },
      yearSum: 0,
      yearExpire: 0,
      //————————————————————历史标准规范数量————————————————————
      historyNumData: {
        column: [],
        values: []
      },
      thisYearNewAdded: 0,
      historySum: 0,
      //————————————————————本月入库标准规范数量————————————————————
      monthNewAdd: 0,
      compSameMon: 0,
      monOnMon: 0,
      monthAvgAdd: 0,
      //————————————————————标准规范审批总体进度————————————————————
      totalProgress: 100,
      progressingNum: 0,
      customColors: [{ color: '#4ba5f9' }],

      //————————————————————  搜索统计数据  ————————————————————
      searchList: [],
      searchUserCount: 0,
      avgSearchCount: 0,
      searchAllChartData: {
        column: [],
        values: []
      },
      searchAvgChartData: {
        column: [],
        values: []
      },

      //————————————————————标准规范审批节点信息————————————————————
      relatedStandard: [],
      useridSelected: null,
      activeName: "first",

      //————————————————————标准规范入库情况————————————————————
      //标准规范层次
      levelChartData: {
        column: ["地方标准", "指南指引", "团体标准", "行业标准", "国家标准", "国际标准"],
        values: []
      },
      //功能序列
      functionChartData: {
        column: [],
        values: []
      },
      //专业门类
      majorChartData: {
        column: [],
        values: []
      },

      //————————————————————系统调用信息排名——————————————————
      rankData: {}
    };
  },
  created() {
    this.getList();
    this.getYearData();
    this.historyData();
    this.monthStorageData();
    this.totalProgressData();
    this.relatedStandardByUserid();
    this.onlineSearchStatics();
    this.standardStatus();
    this.getRankList();
    //this.openLoading();
  },
  methods: {
    getRankList() {
      getRankData().then(response => {
        if (response.code === 200) {
          this.rankData = response.data
        }
        console.log(this.rankData);
      });
    },
    /** 查询服务器信息 */
    getList() {
      this.loading = true;
      listTbHistory(this.queryParams).then(response => {
        this.searchList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //【标准规范审批节点信息】通过用户id获取此用户处理过的标准规范
    relatedStandardByUserid() {
      getRelatedStandardByUserid().then(response => {
        if (response.code == 200 && response.data != "" && response.data.length > 0) {
          var data = response.data;
          this.relatedStandard = data;
          this.nodeSelected = data[0].nid;
          this.selectNid(data[0].nid);
        }
      });
    },
    //【标准规范审批节点信息】触发下拉框触发 获取审批节点数据
    selectNid(nid) {
      this.items = JSON.parse(JSON.stringify(this.itemsModel));
      this.queryParams.nid = nid
      getApprovalsNodes(this.queryParams).then(response => {
        if (response.code == 200) {
          var data = response.data;

          if (data != null && JSON.stringify(data) !== '{}') {
            this.nodesCommonFunc(data.tb_nop_m, "立项通知", 0);
            this.nodesCommonFunc(data.tb_standd, "标准规范起草", 1);
            this.nodesCommonFunc(data.tb_request, "征求意见", 2);
            this.nodesCommonFunc(data.tb_tecreview, "审批处审查", 3);
            this.nodesCommonFunc(data.tb_tecconsider, "技术委员会审议", 4);
            this.nodesCommonFunc(data.tb_dgconsider, "局长办公会审议", 5);
            this.nodesCommonFunc(data.tb_spub, "标准规范发布", 6);
            this.nodesCommonFunc(data.tb_simp, "标准规范实施", 7);
          }
        }
      });
    },
    //【标准规范审批节点信息】中节点信息处理
    nodesCommonFunc(msg, progressName, itemsIndex) {
      if (msg != null) {
        this.items[itemsIndex].color = this.nodeOnColor;
        var stamp = msg[0].stamp;
        this.items[itemsIndex].tag = progressName + `阶段 始于` + this.formatter(stamp, "yyyy-MM-dd hh:mm:ss");
        //判断是否有附件
        var files = null;
        if (msg[0].fname != null) {
          //如果有附件
          var itemContent = "资料清单包括：<br>";
          for (var i = 0; i < msg.length; i++) {
            if (msg[i].fname != null) {
              itemContent += "<a style='font-weight: bold;text-decoration: underline;'>" + msg[i].fname + "</a> 1份 <span style='color:#2ba3fd;'>" +
                msg[i].nick_name + "</span>于" + this.formatter(msg[i].atts_time, "yyyy-MM-dd hh:mm:ss") + "上传";
            }
            itemContent += "<br>";
          }
          this.items[itemsIndex].content = itemContent;
        } else {
          this.items[itemsIndex].content = "暂无信息";
        }
      }
    },
    //日期格式化
    formatter(thistime, fmt) {
      let $this = new Date(thistime)
      let o = {
        'M+': $this.getMonth() + 1,
        'd+': $this.getDate(),
        'h+': $this.getHours(),
        'm+': $this.getMinutes(),
        's+': $this.getSeconds(),
        'q+': Math.floor(($this.getMonth() + 3) / 3),
        'S': $this.getMilliseconds()
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    },
    setMinWidthEmpty(val) {
      // 无数据的情况下，给请选择提示设置最小宽度
      let domEmpty = document.getElementsByClassName('el-select-dropdown__empty')
      if (domEmpty.length > 0) {
        //  domEmpty[0].style['min-width'] = val.srcElement.clientWidth +  'px'
        domEmpty[0].style['min-width'] = "200px";
        domEmpty[0].style['max-width'] = "300px";
      }
    },
    //获取【本年度入库标准规范数量】
    getYearData() {
      getChartYearData(this.queryParams).then(response => {
        var data = response.data;
        this.yearExpire = response.data.expireNum;
        data = data.rows;
        var length = data.length;
        var xData = [];
        var yData = [];
        var sum = 0;
        var month = (new Date()).getMonth() + 1;
        for (var i = 0; i < length; i++) {
          if (data[i]['month'] !== null) {
            xData.push(data[i]['month'])
            if (month == data[i]['month'] && data[i]['num'] >= 0) {
              this.monthNewAdd = data[i]['num'];
            }
          }
          if (data[i]['num'] !== null) {
            yData.push(data[i]['num']);
            sum += data[i]['num'];
          }
        }

        this.monthAvgAdd = (sum / month).toFixed(1);
        this.yearSum = sum;
        this.yearChartData.values = yData;
        this.$refs.yearChart.initEcharts();
      })
    },
    //获取【历史标准规范数量】数据
    historyData() {
      getHistory(this.queryParams).then(response => {
        var data = response.data.rows;
        var length = data.length;
        var xData = [];
        var yData = [];
        var sum = 0;
        for (var i = 0; i < length; i++) {
          if (data[i]['month'] !== null && data[i]['year'] !== null) {
            xData.push(data[i]['year'] + "年" + data[i]['month'] + "月");
          }
          if (data[i]['num'] !== null) {
            yData.push(data[i]['num']);
            sum += data[i]['num'];
          }
        }
        this.historySum = sum;
        this.historyNumData.column = xData;
        this.historyNumData.values = yData;
        this.$refs.historyNum.initEcharts();

        this.thisYearNewAdded = response.data.thisYearNewAdded;
      })
    },
    //获取【本月入库标准规范数量】数据
    monthStorageData() {
      getCompareData(this.queryParams).then(response => {
        var compData = response.data.compSameMon[0];
        var monOnM = response.data.monOnMon[0];
        if (compData != null) {
          this.compSameMon = compData.res.toFixed(2);
        }
        if (monOnM != null) {
          this.monOnMon = monOnM.res.toFixed(2);
        }
      })
    },
    //获取【标准规范审批总体进度】数据
    totalProgressData() {
      getTotalProgress().then(response => {

        if (response.code == 200) {
          if (response.data.totalProgress != null) {
            this.totalProgress = response.data.totalProgress;
          }
          if (response.data.progressingNum != null) {
            this.progressingNum = response.data.progressingNum;
          }
        }
      });
    },
    //获取【线上搜索统计】数据
    onlineSearchStatics() {
      //数字数据
      getSearchUserData().then(res => {
        if (res.code == 200) {
          var data = res.data[0];
          this.searchUserCount = data.users;
          this.avgSearchCount = data.avg;
        }
      });
      // searchAllChartData
      //图表数据
      getSearchChartData().then(res => {
        if (res.code == 200) {
          var data = res.data;
          console.log(data);

          var searchUser = data.searchUser;
          console.log(searchUser);
          for (var i = 0; i < searchUser.length; i++) {
            this.searchAllChartData.column[i] = this.formatter(searchUser[i].date, 'yyyy-MM-dd');
            this.searchAllChartData.values[i] = searchUser[i].num;
          }

          var searchAvg = data.searchAvg;
          for (var i = 0; i < searchAvg.length; i++) {
            this.searchAvgChartData.column[i] = this.formatter(searchAvg[i].date, 'yyyy-MM-dd');
            this.searchAvgChartData.values[i] = searchAvg[i].num;
          }
        }

        this.$refs.searchAllChart.initEcharts();
        this.$refs.searchAvgChart.initEcharts();
      });
    },
    //【标准规范入库情况】
    standardStatus() {
      //标准规范层次
      getStandardLevelData().then(res => {
        var data = res.data;
        var yData = [0, 0, 0, 0, 0, 0];
        //["地方标准", "指南指引", "团体标准", "行业标准", "国家标准", "国际标准"],
        for (var i = 0; i < data.length; i++) {
          if (data[i].std_tp == "地方标准") {
            yData[0] = data[i].num;
          } else if (data[i].std_tp == "指南指引") {
            yData[1] = data[i].num;
          } else if (data[i].std_tp == "团体标准") {
            yData[2] = data[i].num;
          } else if (data[i].std_tp == "行业标准") {
            yData[3] = data[i].num;
          } else if (data[i].std_tp == "国家标准") {
            yData[4] = data[i].num;
          } else if (data[i].std_tp == "国际标准") {
            yData[5] = data[i].num;
          }
        }

        this.levelChartData.values = yData;
        this.$refs.standardLevelChart.initEcharts();
      });

      //功能序列
      getStandardFunctionData().then(res => {
        if (res.code == 200) {
          var data = res.data;
          for (var i = 0; i < data.length; i++) {
            this.functionChartData.column[i] = data[i].name;
            this.functionChartData.values[i] = data[i].num;
          }
        }
        this.$refs.standardFunctionChart.initEcharts();
      });

      //专业分类
      getStandardMajorData().then(res => {
        if (res.code == 200) {
          var data = res.data;
          for (var i = 0; i < data.length; i++) {
            this.majorChartData.column[i] = data[i].name;
            this.majorChartData.values[i] = data[i].num;
          }
        }
        this.$refs.standardMajorChart.initEcharts();
      });
    },


    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
    },
    // 打开加载层
    openLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "拼命读取中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};

</script>
<style scoped lang="scss">
@import "~@/assets/styles/utils";

.box_card {
  width: 100%;
  margin-bottom: 24px;
  display: grid;

  &.center {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-areas: "a b""a c";
    height: 730px;
    .el-card {
      width: 100%;
    }
  }

  &.top {
    .el-card {
      width: 100%;
    }
  }
}

i {

  &.success,
  &.danger {
    font-size: 24px;
    transform: translateY(-3.5px);
  }
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.card-num {
  font-size: 38px;
}

.delate-step-lt {
  width: 80px;
  color: #818181;
  font-size: 13px;
  display: table-cell;
  position: relative;

}

.delate-time {
  position: absolute;

}

.delate-step-rt {
  display: table-cell;
}

.card-footer {
  height: 20px;
}

.custom-title {
  font-size: 20px;
  font-weight: bold;
}

.card_height {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

</style>
